<template lang="pug">
#vsider
  el-row.tac
    router-link(to="/admin/")
      img(src="http://xiaoniao-pic.oss-cn-shanghai.aliyuncs.com/xiaoniaologo.png")
    el-col(:span='8')
      el-menu.el-menu-vertical-demo(:router="true", @open='handleOpen',@select='handleSelect', @close='handleClose', theme="dark",:default-active="defaultActive")
        el-menu-item(index='/admin/')
          i.el-icon-menu
          | 仪表盘
        el-menu-item(index='/admin/users')
          i.el-icon-setting
          | 管理员
        el-menu-item(index='/admin/visitor')
          i.el-icon-setting
          | 用户管理
        el-submenu(index='/admin/1')
          template(slot='title')
            i.el-icon-document
            | 书法管理
          //- el-menu-item-group(title = '书法')
          el-menu-item(index='/admin/articles')  文字视频管理
          el-menu-item(index='/admin/addArticle') 添加文字视频
          el-menu-item(index='/admin/versionmgt') 版本管理
          el-menu-item(index='/admin/comments/article') 评论管理
          el-menu-item(index='/admin/votes')  点赞管理

            //- el-menu-item(index='/admin/addVote') 添加投票
            //- el-menu-item(index='/admin/comments/vote') 评论管理
        //- el-submenu(index='/admin/2')
          template(slot='title')
            i.el-icon-more
          el-menu-item(index='/admin/about') 关于

</template>

<script>
export default {
  name: "vsider",
  computed: {
    defaultActive() {
      let path = this.$store.state.curentPath;
      if (this.isreload) {
        path = location.pathname !=='/' ? location.pathname : "/admin/";
        this.isreload = false;
      }
      return path;
    }
  },
  data() {
    return {
      routes: [],
      isreload: true
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$store.dispatch("LINK_CURENT_MENU", {
        data: key
      });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  beforeMount() {}
};
</script>

<style lang="stylus" scoped>
img {
  width: calc(100% - 40px);
  margin: 20px;
}

#vsider {
  texta-align: left;

  & {
    text-align: left;
  }
}
</style>

